<template>
    <div class="container block">
        <div class="header">
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入人员姓名/身份证号"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
            <div class="search">
                <button
                    class="btn-green download-btn"
                    @click="isBatchPay = true"
                >
                    <i class="el-icon el-icon-download" />
                    上传工资单
                </button>
<!--                <button class="btn" @click="onExport">-->
<!--                    <i class="el-icon el-icon-upload2" />-->
<!--                    导出勾选-->
<!--                </button>-->
                <export-button style="width: initial" @export="onExport">导出勾选</export-button>
                <button class="btn btn-red" @click="onDelete">
                    <i class="el-icon el-icon-delete" />
                    删除
                </button>
            </div>
        </div>
        <el-scrollbar>
            <!-- Object.keys(tableHeaderData).length * 220 + 'px' -->
            <div
                class="table"
                :style="{
                    width:
                        Object.keys(tableHeaderData).length > 6
                            ? Object.keys(tableHeaderData).length * 220 + 'px'
                            : '100%'
                }"
            >
                <el-table
                    :data="tableData"
                    :header-row-style="{ color: '#202536' }"
                    :row-style="{ color: '#5E617D' }"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column
                        prop="11"
                        :label="item.value"
                        v-for="(item, index) in tableHeaderData"
                        v-bind:key="index"
                        :width="
                            Object.keys(tableHeaderData).length > 6
                                ? '220px'
                                : ''
                        "
                    >
                        <template v-slot="scope">
                            {{ tableData[scope.$index].bodyInfo[index] }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-scrollbar>
        <el-pagination
            class="pagination"
            v-model:currentPage="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="getList"
        >
        </el-pagination>
        <batchPayroll
            v-if="isBatchPay"
            @close="isBatchPay = false"
            @complete="getList"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getPayrollDetailHeader,
    getPayrollDetailList,
    payrollDetailDelete,
    PayrollDto
} from '@/api/payroll'
import { exportPayrollDetail } from '@/api/export'
import batchPayroll from '@/components/batch-payroll.vue'
export default defineComponent({
    name: 'PayrollDetail',
    components: {
        batchPayroll
    },
    data () {
        return {
            isBatchPay: false,
            tableData: [] as PayrollDto[],
            tableHeaderData: [] as { value: string }[],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            searchText: '',
            searchValue: '',
            selects: [] as string[]
        }
    },
    created () {
        // this.getList()
        this.getHeaderList()
        this.getList()
    },
    methods: {
        async getHeaderList () {
            const { id } = this.$route.params
            const result = await getPayrollDetailHeader(id)
            this.tableHeaderData = result
        },
        async getList () {
            const { id } = this.$route.params
            const result = await getPayrollDetailList({
                stubId: id,
                searchText: this.searchText,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
            this.total = result.total
            this.tableData = result.list
            console.log(this.tableData, 'tableData')
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getList()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getList()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        /**
         * 导出勾选
         */
        async onExport () {
            const result = await exportPayrollDetail({
                ids: this.selects.join(','),
                searchText: this.searchText,
                stubId: this.$route.params.id
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                '/common/download?delete=true&fileName=' +
                result

            this.$message.success('导出成功！')
        },
        /**
         * 删除勾选工资单
         */
        async onDelete () {
            const str = this.selects.join(',')
            if (str.length === 0) {
                this.$message.warning('请至少选择一个！')
                return
            }
            await payrollDetailDelete(str)
            this.$message.success('删除成功！')
            await this.getList()
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.download-btn
    width: 126px !important
/deep/.el-table--scrollable-x .el-table__body-wrapper {
   overflow-x clip
}
.btn-red
    background #FF7E68
</style>
